<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">

    <meta content="telephone=yes,email=yes" name="format-detection">
    <!--//自动识别电话号码和邮箱-->

    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="apple-touch-icon" href="images/HTML5_Badge_64.png"/>
    <!--//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入-->
    <title>有收入</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--初始化样式-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/UploadImg.css">
    <!--共用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--整个网站的局部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--适配样式-->
    <link rel="stylesheet" href="css/styleMedia.css">
    <style>
        html, body {
            position: relative;
            overflow-x: hidden;
        }

    </style>
    <style>

        img{
    width:100%;
    height:auto;
    }
    .overlay{
    background-color:#efefef;
    opacity: 0.97;
    filter:alpha(opacity=97);
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 10;
    }
    .overlayimg{
    /*position: absolute;*/
    z-index: 11;
    left:0;
    top:0;
        position: fixed;
    }
    </style>


</head>
<body style="background-color: #f4f9fd;">

<!--header begin-->
<header>
    <div id="flexHeader">
        <div class="div1 mui-action-back"><a><img src="images/icon_arrow_left.png"></a></div>
        <div class="div2">操作任务</div>
        <div class="div3"></div>
    </div>
</header>
<!--header end-->


<!--Shop name begin-->
<article class="shop-name height-padding">
    <p>店铺名称</p>
</article>
<!--shop name end -->


<!--Merchant merchandise begin-->
<article class="merchant-merchandise ">
    <div class="businessId">目标商品</div>
    <main>
        <div><img src="images/img_commodity.png"></div>
        <aside>
            <div>商品名称</div>
            <div>搜索展示价格：<span>79元</span></div>
            <div><span>普通浏览+加购物车</span></div>
        </aside>
    </main>
</article>
<!--Merchant merchandise end-->


<!--Task points begin-->
<article class="task-points">
    <p>任务要点</p>
</article>
<!--Task points end-->

<!--task-points-content begin-->
<article class="task-points-content-main">
    <div>
        <p>任务类型</p>
        <p>213131</p>
    </div>
    <div>
        <p>搜索关键词</p>
        <p>商品名称</p>
    </div>
    <div>
        <aside>
            <a href="#">复制关键词并打开淘宝</a>
        </aside>
    </div>
    <div>
        <p>排序方式</p>
        <p>销量排序</p>
    </div>
    <div>
        <p>所在地区</p>
        <p>全国</p>
    </div>
    <div>
        <p>价格区间</p>
        <p>无需筛选价格</p>
    </div>
</article>
<!--task-points-content end-->



<!--Task points begin-->
<article class="task-points">
    <p>商家要求(长按课选择-复制)</p>
</article>
<!--Task points end-->

<article class="task-points-content">
    <div>
        <p>无</p>
    </div>
</article>


<!--Task points begin-->
<article class="task-points">
    <p>注意事项</p>
</article>
<!--Task points end-->

<article class="task-points-content-main">
    <div class="matters-needing-attention-div">
        <aside class="matters-needing-attention out-to-the-top">
            <p><span>手机浏览任务：</span>手机浏览任务：即通过商家给出的关键词搜索找到目标商品， 并对此商品从上到下进行至少2分钟的浏览任务！过程中必须 分别截图 </p>
            <p>1.搜索结果页:必须显示搜索关键词和目标商品</p>
            <p>2.目标商品的头部</p>
            <p>3.目标商品的尾部(目标商品尾部在“看了又看”上方)并上传完 成任务。</p>
        </aside>
    </div>
</article>
<article class="task-points-content-main ">
    <div class="matters-needing-attention-div">
        <aside class="matters-needing-attention">
            <p><span> 浏览+收藏任务：</span>是手机浏览任务的升级版，即完成目标商品 浏览任务后，再进行 </p>
            <p>1.收藏目标商品</p>
            <p>2.将目标商品加入购物车</p>
            <p>3.收藏店铺，然后分别在商品收藏夹，购物车，收藏店铺里有 显示目标商品和店铺的页面截图并上传。</p>
        </aside>
    </div>
</article>


<!--The goods are compared to the three begin-->
<article class="goods-compared-three">
    <section>操作步骤</section>
    <section>
        <p>1.请确认使用已绑定的账号登录淘宝</p>
        <p>2.点击搜索框粘贴指定的关键词</p>
        <p>3.对搜索结果页面截一张图</p>
        <p>4.根据商品主图、价格、名称等找到目标商品，点击进入店铺</p>
        <p>5.点开店铺里任意2到2个商品，分别截图，商品需要慢慢滑动到详情底部 </p>
        <p>6.返回到目标商品详情页，从头到尾慢慢浏览，停留至少3分钟，并在页面头部和底部时分别截图</p>
        <p>7.收藏店铺、收藏目标商品，并对宝贝收藏夹页面截图</p>
        <p>8.将目标商品添加到购物车，并对购物车截图</p>
    </section>
    <section>
        <ul>
            <li>
                <p>搜索结果页&nbsp;&nbsp;</p>
                <p>
                    <div class="fileBtn">
                        <p>+</p>
                        <input id="fileBtn" type="file" onchange="upload();" accept="image/*" capture="camera" multiple="multiple"/>
                        <!--单张图片容器-->
                        <img src="" id="img"/>
                    </div>
                </p>
            </li>
            <li>
                <p>店铺商品1&nbsp;&nbsp;&nbsp;&nbsp;</p>
                <p>
                    <div class="fileBtn">
                <p>+</p>
                <input id="fileBtn2" type="file" onchange="upload2();" accept="image/*" capture="camera" multiple="multiple"/>
                <!--单张图片容器-->
                <img src="" id="img2"/>
                </div>
                </p>
            </li>
            <li>
                <p>目标商品头部</p>
                <p>
                    <div class="fileBtn">
                <p>+</p>
                <input id="fileBtn3" type="file" onchange="upload3();" accept="image/*" capture="camera" multiple="multiple"/>
                <!--单张图片容器-->
                <img src="" id="img3"/>
                </div>
                </p>
            </li>
            <li>
                <p>目标商品尾部</p>
                <p>
                    <div class="fileBtn">
                <p>+</p>
                <input id="fileBtn4" type="file" onchange="upload4();" accept="image/*" capture="camera" multiple="multiple"/>
                <!--单张图片容器-->
                <img src="" id="img4"/>
                </div>
                </p>
            </li>
            <li>
                <p>目标商品尾部</p>
                <p>
                    <div class="fileBtn">
                <p>+</p>
                <input id="fileBtn5" type="file" onchange="upload5();" accept="image/*" capture="camera" multiple="multiple"/>
                <!--单张图片容器-->
                <img src="" id="img5"/>
                </div>
                </p>
            </li>
        </ul>
    </section>
</article>
<!--The goods are compared to the three end-->


<!--Next step begin -->
<article class="next-step">
    <section></section>
    <section>
        <aside>
            <a href="operationTask_advance_newPresale.html">提交任务</a>
        </aside>
    </section>
</article>
<!--Next step end-->


<!--js-->
<script src="js/UploadImg.js"></script>
<script src="js/mui.min.js"></script>
<script>
    function expandPhoto(){
        var overlay = document.createElement("div");
        overlay.setAttribute("id","overlay");
        overlay.setAttribute("class","overlay");
        document.body.appendChild(overlay);

        var img = document.createElement("img");
        img.setAttribute("class","overlayimg");
        img.src = this.getAttribute("src");
        document.getElementById("overlay").appendChild(img);

        img.onclick = restore;
    }
    function restore(){
        document.body.removeChild(document.getElementById("overlay"));
        document.body.removeChild(document.getElementById("img"));
    }
    window.onload = function(){
        var imgs = document.getElementsByTagName("img");
        imgs[0].focus();
        for(var i = 0;i<imgs.length;i++){
            imgs[i].onclick = expandPhoto;
            imgs[i].onkeydown = expandPhoto;
        }

    }

</script>
</body>
</html>